var opt = {
	floorTop: -20,
	opacity: 0.4,
};
var opt1 = {
	floorTop: 20,
	opacity: 1,
};
var time, clickNum = 0;
/*var catchT = window.setTimeout(function(){
	$("#cache").prev().css({"animation":"bottom2display 2s","top": "100%","opacity": "0"});
	$("#cache").next().css({"animation":"top2display 2s","top": "-530px","opacity": "0"});
},5000);*/
function floorMove(opts, thisObj, $objId) {
	floorMoveTop(opts, thisObj, $objId);
	time = setTimeout(function() {
		$(thisObj).find("div.nav_icon_light").css("display", "none");
		floorMoveTop(opt1, thisObj, $objId)
	}, 5000)
}

function floorMoveTop(opts, thisObj, $objId) {
	if ($objId == "appFloor") {
		$("#appFloor").css("top", "0px");
		$("#appFloor").css("transition", ".2s linear");
		$("#cacheFloor").css("opacity", opts.opacity);
		$("#cacheFloor").css("top", "185px");
		$("#cacheFloor").css("transition", ".2s linear");
		$("#dbFloor").css("opacity", opts.opacity);
		$("#dbFloor").css("top", "370px");
		$("#dbFloor").css("transition", ".2s linear")
	} else {
		if ($objId == "cacheFloor") {
			var t1 = parseInt($("#appFloor").css("top"));
			var db_t = t1 + opts.floorTop + "px";
			$("#appFloor").css("opacity", opts.opacity);
			$("#appFloor").css("top", db_t);
			$("#appFloor").css("transition", ".2s linear");
			var t2 = parseInt($(thisObj).css("top"));
			$(thisObj).css("top", t2);
			$(thisObj).css("transition", ".2s linear");
			var t3 = parseInt($("#dbFloor").css("top"));
			var app_t = t3 - opts.floorTop + "px";
			$("#dbFloor").css("opacity", opts.opacity);
			$("#dbFloor").css("top", app_t);
			$("#dbFloor").css("transition", ".2s linear")
		} else {
			if ($objId == "dbFloor") {
				var t1 = parseInt($("#appFloor").css("top"));
				var db_t = t1 + opts.floorTop + "px";
				$("#appFloor").css("opacity", opts.opacity);
				$("#appFloor").css("top", db_t);
				$("#appFloor").css("transition", ".2s linear");
				var t2 = parseInt($("#cacheFloor").css("top"));
				var app_t = t2 + opts.floorTop + "px";
				$("#cacheFloor").css("opacity", opts.opacity);
				$("#cacheFloor").css("top", app_t);
				$("#cacheFloor").css("transition", ".2s linear");
				$(thisObj).css("opacity", 1)
			}
		}
	}
}
/*定义下部分流动数字的高度*/
var baseOpts = {
	font_size: 10,
	height: 11,
	width: 150,
	font_color: "rgba(175,205,245,0.8)",
	direction: "down",
	deg: "rotate(90deg)",
	linegra: "no"
};

var optionsdb0 = $.extend(true, {}, baseOpts, {
	id: "db0"
});
var optionsdb0_1 = $.extend(true, {}, baseOpts, {
	id: "db0_1",
	direction: 'up'
});

var optionsdb1 = $.extend(true, {}, baseOpts, {
	id: "db1",
	font_color: "rgba(175,205,245,0.45)"
});
var optionsdb1_1 = $.extend(true, {}, baseOpts, {
	id: "db1_1",
	font_color: "rgba(175,205,245,0.45)",
	direction: 'up'
});

var optionsdb2 = $.extend(true, {}, baseOpts, {
	id: "db2"
});
var optionsdb2_1 = $.extend(true, {}, baseOpts, {
	id: "db2_1",
	direction: 'up'
});

var optionsdb3 = $.extend(true, {}, baseOpts, {
	id: "db3",
	font_color: "rgba(175,205,245,0.45)"
});
var optionsdb3_1 = $.extend(true, {}, baseOpts, {
	id: "db3_1",
	font_color: "rgba(175,205,245,0.45)",
	direction: 'up'
});

var optionsdb4 = $.extend(true, {}, baseOpts, {
	id: "db4"
});
var optionsdb4_1 = $.extend(true, {}, baseOpts, {
	id: "db4_1",
	direction: 'up'
});

var optionsdb5 = $.extend(true, {}, baseOpts, {
	id: "db5",
	font_color: "rgba(175,205,245,0.45)"
});
var optionsdb5_1 = $.extend(true, {}, baseOpts, {
	id: "db5_1",
	font_color: "rgba(175,205,245,0.45)",
	direction: 'up'
});

var optionsdb6 = $.extend(true, {}, baseOpts, {
	id: "db6"
});
var optionsdb6_1 = $.extend(true, {}, baseOpts, {
	id: "db6_1",
	direction: 'up'
});

var optionsapp0 = $.extend(true, {}, baseOpts, {
	id: "app0",
	font_color: "rgba(175,205,245,0.2)",
	direction: "left",
	linegra: "left"
});

var optionsapp1 = $.extend(true, {}, baseOpts, {
	id: "app1",
	font_color: "rgba(175,205,245,0.45)",
	direction: "right",
	linegra: "right"
});

var optionsapp3 = $.extend(true, {}, baseOpts, {
	id: "app3",
	font_color: "rgba(175,205,245,0.45)",
	direction: "left",
	linegra: "left"
});

var optionsapp4 = $.extend(true, {}, baseOpts, {
	id: "app4",
	font_color: "rgba(175,205,245,0.2)",
	direction: "right",
	linegra: "right"
});

var optionsapp5 = $.extend(true, {}, baseOpts, {
	id: "app5",
	font_color: "rgba(175,205,245,0.45)",
	direction: "left",
	linegra: "left"
});

var optionsapp6 = $.extend(true, {}, baseOpts, {
	id: "app6",
	font_color: "rgba(175,205,245,0.2)",
	direction: "right",
	linegra: "right"
});

var optionsapp7 = $.extend(true, {}, baseOpts, {
	id: "app7",
	font_color: "rgba(175,205,245,0.45)",
	direction: "left",
	linegra: "left"
});

var optionsapp8 = $.extend(true, {}, baseOpts, {
	id: "app8",
	font_color: "rgba(175,205,245,0.2)",
	direction: "right",
	linegra: "right"
});

var optionsIDC0 = $.extend(true, {}, baseOpts, {
	id: "rightIDC_0",
	width: 150,
	font_color: "rgba(175,205,245,0.2)",
	direction: "left",
	linegra: "left",
	deg: "0"
});

var optionsIDC1 = $.extend(true, {}, baseOpts, {
	id: "rightIDC_1",
	width: 150,
	font_color: "rgba(175,205,245,0.2)",
	direction: "right",
	linegra: "right",
	deg: "0"
});

var optionsIDC2 = $.extend(true, {}, baseOpts, {
	id: "rightIDC_2",
	width: 150,
	font_color: "rgba(175,205,245,0.2)",
	direction: "left",
	linegra: "left",
	deg: "0"
});

var optionsIDC3 = $.extend(true, {}, baseOpts, {
	id: "rightIDC_3",
	width: 150,
	font_color: "rgba(175,205,245,0.2)",
	direction: "right",
	linegra: "right",
	deg: "0"
});

function maTrix2v(opt) {
	var c = document.getElementById(opt.id);
	var ctx = c.getContext("2d");
	c.style.transform = opt.deg;
	c.height = opt.height;
	c.width = opt.width;
	var font_size = opt.font_size;
	var font_color = opt.font_color;
	var rows = c.height / (font_size);
	var columns = c.width / (font_size);
	var direction = opt.direction;
	var Mat_init_flag = 0;
	var Martrix = new Array();

	function draw() {
		ctx.fillStyle = "rgba(255, 255, 255, 1)";
		ctx.clearRect(0, 0, c.width, c.height);
		ctx.fillStyle = font_color;
		ctx.font = font_size + "px arial";
		getMatrix(Martrix, rows, columns, direction);
		for (var i = 0; i < rows; i++) {
			for (var j = 0; j < columns; j++) {
				text = Martrix[i][j];
				var my_gradient = ctx.createLinearGradient(0, 0, opt.width, 0);
				switch (opt.linegra) {
					case "left":
						my_gradient.addColorStop(0, "white");
						my_gradient.addColorStop(1, font_color);
						break;
					case "right":
						my_gradient.addColorStop(0, font_color);
						my_gradient.addColorStop(1, "white");
						break;
					default:
						my_gradient = font_color
				}
				ctx.fillStyle = my_gradient;
				ctx.fillText(text, j * font_size - j * 3, i * font_size)
			}
		}
	}

	function getMatrix(arrayname, row, col, direc) {
		if (!Mat_init_flag) {
			for (var i = 0; i < row; i++) {
				arrayname[i] = new Array();
				for (var j = 0; j < col; j++) {
					arrayname[i][j] = Math.floor(Math.random() * 2)
				}
			}
			Mat_init_flag = 1
		}
		if (direc === "left" || direc === "up") {
			left()
		} else {
			if (direc === "right" || direc === "down") {
				right()
			} else {
				return
			}
		}

		function down() {
			for (var i = row - 1; i > -1; i--) {
				if (i > 0) {
					for (var j = 0; j < col; j++) {
						arrayname[i][j] = arrayname[i - 1][j]
					}
				} else {
					for (var j = 0; j < col; j++) {
						arrayname[0][j] = Math.floor(Math.random() * 2);
						if (Math.random() > 0.95) {
							arrayname[0][j] = ""
						}
					}
				}
			}
		}

		function right() {
			for (var j = col - 1; j > -1; j--) {
				if (j > 0) {
					for (var i = 0; i < row; i++) {
						arrayname[i][j] = arrayname[i][j - 1]
					}
				} else {
					for (var i = 0; i < row; i++) {
						arrayname[i][0] = Math.floor(Math.random() * 2);
						if (Math.random() > 0.95) {
							arrayname[i][0] = ""
						}
					}
				}
			}
		}

		function left() {
			for (var j = 0; j < col; j++) {
				if (j < col - 1) {
					for (var i = 0; i < row; i++) {
						arrayname[i][j] = arrayname[i][j + 1]
					}
				} else {
					for (var i = 0; i < row; i++) {
						arrayname[i][col - 1] = Math.floor(Math.random() * 2);
						if (Math.random() > 0.95) {
							arrayname[i][col - 1] = ""
						}
					}
				}
			}
		}
	}
	setInterval(draw, 140)
}
/* down */
maTrix2v(optionsapp0);
maTrix2v(optionsapp1);
maTrix2v(optionsapp3);
maTrix2v(optionsapp4);
maTrix2v(optionsapp5);
maTrix2v(optionsapp6);
maTrix2v(optionsapp7);
maTrix2v(optionsapp8);

/* left right */
// maTrix2v(optionsright0);
// maTrix2v(optionsright1);
// maTrix2v(optionsleft0);
// maTrix2v(optionsleft1);
/* right idc datastream */
maTrix2v(optionsIDC0);
maTrix2v(optionsIDC1);
maTrix2v(optionsIDC2);
maTrix2v(optionsIDC3);
/* up */
maTrix2v(optionsdb0);
maTrix2v(optionsdb1);
maTrix2v(optionsdb2);
maTrix2v(optionsdb3);
maTrix2v(optionsdb4);
maTrix2v(optionsdb5);
maTrix2v(optionsdb6);
maTrix2v(optionsdb0_1);
maTrix2v(optionsdb1_1);
maTrix2v(optionsdb2_1);
maTrix2v(optionsdb3_1);
maTrix2v(optionsdb4_1);
maTrix2v(optionsdb5_1);
maTrix2v(optionsdb6_1);

$("#cache").on('click',function(){
	window.clearTimeout();
	setTimeout(function(){
		$(".col75").hide();
	},3000);
	$(this).children().css({"animation":"middle2all 3s"}).addClass('middleDone');
	$(this).prev().css({"animation":"bottom2display 2s","top": "100%","opacity": "0"});
	$(this).next().css({"animation":"top2display 2s","top": "-530px","opacity": "0"});
});
